<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");
            for (var i = 0; i < 8; i++) {
                for (var j = 0; j < 8; j++) {
                    cxt.fillStyle = "rgb(" + Math.floor(255 - 42.5 * i) + "," + Math.floor(255 - 42.5 * j) + ",0)";
                    cxt.fillRect(j * 25, i * 25, 25, 25);
                }
            }
        }
    </script>
</head>

<body><canvas id="canvas" width="200" height="200" style="border:1px dashed gray;"></canvas></body>

</html>